import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: Main()));
}

class Main extends StatefulWidget {
  const Main({super.key});

  @override
  _MainState createState() => _MainState();
}

class _MainState extends State<Main> {
  @override
  Widget build(BuildContext context) {
    // 1. 提供的数据
    const List orderInfo = [
      {
        "createTime": "2021-05-15 21:49:48",
        "orderState": 2,
        "image":
            "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
        "name": "茶水分离杯耐热隔热玻璃杯",
        "totalNum": 1,
        "curPrice": 119.5,
        "totalMoney": 119.5,
        "attrsText": "规格:白色240ml "
      },
      {
        "createTime": "2021-08-21 19:05:47",
        "orderState": 2,
        "image":
            "https://yanxuan-item.nosdn.127.net/f899c55f36cb74232abb349234d9e676.png",
        "name": "儿童防污/防蚊T恤110cm",
        "totalNum": 1,
        "curPrice": 89.5,
        "totalMoney": 89.5,
        "attrsText": "颜色:白色柠檬（防污） 尺码:160cm "
      },
      {
        "createTime": "2021-08-15 12:33:54",
        "orderState": 2,
        "image":
            "https://yanxuan-item.nosdn.127.net/dcd0937695ffd65053adfac36b79517e.jpg",
        "name": "【包邮】冰与火的碰撞威士忌杯2支装水杯",
        "totalNum": 1,
        "curPrice": 39.5,
        "totalMoney": 39.5,
        "attrsText": "规格:基础款复古菱纹2只（国产） "
      },
      {
        "createTime": "2021-07-23 00:01:09",
        "orderState": 2,
        "image":
            "https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg",
        "name": "德国百年工艺高端水晶玻璃红酒杯2支装",
        "totalNum": 1,
        "curPrice": 139.5,
        "totalMoney": 139.5,
        "attrsText": "规格:白葡萄酒杯双杯 "
      },
      {
        "createTime": "2021-05-17 10:59:13",
        "orderState": 2,
        "image":
            "https://yanxuan-item.nosdn.127.net/c327b313314b9362ce9f49b253b0b61c.png",
        "name": "网易智造零感蓝牙耳机",
        "totalNum": 1,
        "curPrice": 59.5,
        "totalMoney": 59.5,
        "attrsText": "颜色:幻夜灰 "
      }
    ];
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'ListView - ,separated',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.deepPurpleAccent,
      ),
      body: Container(
        color: Colors.transparent,
        child: ListView.separated(
          itemBuilder: (BuildContext context, int index) {
            return Container(
              padding: const EdgeInsets.all(10),
              color: const Color.fromARGB(255, 242, 231, 235),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        orderInfo[index]['createTime'],
                        style:
                            const TextStyle(color: Colors.black, fontSize: 13),
                      ),
                      const Text(
                        '待发货',
                        style: TextStyle(color: Colors.orange, fontSize: 13),
                      ),
                    ],
                  ),
                  const SizedBox(height: 10), // 充当 margin 角色
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Image.network(
                        width: 100,
                        height: 100,
                        orderInfo[index]['image'],
                      ),
                      const SizedBox(
                        width: 10,
                      ),
                      Expanded(
                          child: Container(
                        height: 100,
                        color: Colors.transparent,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              orderInfo[index]['name'],
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                            Container(
                              color: Colors.white,
                              child: Text(
                                orderInfo[index]['attrsText'],
                                style: const TextStyle(color: Colors.grey),
                              ),
                            ),
                            Container(
                              child: Text('￥${orderInfo[index]['curPrice']}'),
                            )
                          ],
                        ),
                      )),
                      Container(
                        margin: const EdgeInsets.only(top: 10),
                        child: Text('x ${orderInfo[index]['totalNum']}'),
                      )
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Text('合计：￥${orderInfo[index]['totalMoney']}'),
                    ],
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      ElevatedButton(
                        onPressed: () {},
                        child: const Text('再次购买'),
                      ),
                    ],
                  ),
                ],
              ),
            );
          },
          separatorBuilder: (context, index) {
            return Container(
              height: 1,
              color: Colors.black,
            );
          },
          itemCount: orderInfo.length,
        ),
      ),
    );
  }
}
